<template>
  <div class="common-layout">
    <el-container>
		<!-- 顶部 -->
      <el-header>
		  <h2>办公自动化系统<!-- {{u.name}} --></h2>
		  </el-header>
	  
	  
      <el-container>
		  <!-- 侧边栏 -->
        <el-aside width="200px">
			<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
		</el-aside>
        <el-container>
			<!-- 主体部分 -->
          <el-main>
			  <router-view></router-view>
		  </el-main>
		  
		  <!-- 底部 -->
          <!-- <el-footer>Footer</el-footer> -->
		  
        </el-container>
      </el-container>
    </el-container>
  </div>
	
	
	
	
	
</template>

<script>
	export default {
		data(){
			return{
				defaultProps: {
				  children: 'children',
				  label: 'label',
				},
				treeData:[],
				u:{}
				
			}
		},
		methods:{
			handleNodeClick(data) {
			
			    //某个节点被点击后，拿到url跳转路由即可
				this.$router.push(data.url)
			}
			
		},
		created(){
			let user = JSON.parse(sessionStorage.getItem("user"))
			this.u=user
			let r = user.userRole
			let that = this
			that.$axios.get("http://localhost:8080/menu/list?roleId=" + r).then(function(res) {
				console.log(res.data)
				for (let m in res.data) {
					let menu = res.data[m]   //{menuId: 1, menuName: "系统管理", parentId: 0, url: "/system/", visible: "1", …}
					
					//参考树菜单的结构进行组建
					let mp = {
						label: menu.menuName,
						url: menu.url,
						children: []
					}
					if (menu.childMenu.length > 0) {
						for (let k in menu.childMenu) {
							let cm = menu.childMenu[k]   //{menuId: 100, menuName: "用户管理", parentId: 1, url: "/system/user", visible: "1", …}
							console.log(">>>>>>>>." + cm)
							mp.children.push({
								label: cm.menuName,
								url: cm.url
							})
						}
					}
					that.treeData.push(mp)
				
				}
				})
		}
	}
	
	
	
</script>

<style>
	.el-main{
		height: 600px;
		
	}
	.el-col {
		width: 200px;
	}
	.el-sub-menu {
		width: 200px;
	}

	.el-menu {
		border-right: 0;
	}
	.el-menu-item {
		font-size: 12px;
	}


</style>
